<template>
  <div class="edit">
    <input type="text" ref="iptRef" v-if="isEdit" :value="value" @blur="isEdit = false" @keyup.enter="edit"/>
    <span @dblclick="showInput" v-else>{{ value }}</span>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number
    },
  },
  data() {
    return {
      isEdit: false,
    }
  },
  methods: {
    edit(e) {
      console.log(e.target.value);
      console.log(typeof(+e.target.value))
      if (e.target.value.trim() === "") {
        return alert('年龄不能为空')
      }
      if(typeof(+e.target.value) !== 'number' || isNaN(e.target.value)){
        return alert('年龄必须为数字')
      }
      if(+e.target.value > 100 || +e.target.value < 18){
        return alert('年龄不能超过100 或者 小于18')
      }
      if(+e.target.value < 0){
        return alert('年龄不能小于0')
      }
      this.$emit("input", +e.target.value)
      this.isEdit = false
    },
    showInput(){
      this.isEdit = true
      this.$nextTick(() => {
        this.$refs.iptRef.focus()
      });
    }
  },
};
</script>

<style lang="scss" scoped>
// 编辑
.edit {
  input {
    width: 80px;
    height: 35px;
    border-radius: 5px;
    outline: none;
    padding: 0 5px;
    font-size: 15px;
    border: 1px solid #999;
  }
  span {
    font-weight: 500;
    font-size: 18px;
  }
}
</style>